<template>
	<view>
		<view class="bg-linear-ger" style="height: 250px;">
			<img class="pl-2 mt-5" src="static/logo.png" alt="" srcset="" />
		</view>
		<view class="bg-white rounded-top" style="position: relative; top: -100px">
			<view class="p-5 font text-FFC251 font-weight-bold-600">欢迎登录</view>
			<view class="pl-2 pr-2 lineHight-3">
				<u-field v-model="form.username" label="账号" placeholder="请输入登录账号">
				</u-field>
				<u-field v-model="form.password" label="密码" placeholder="请输入密码">
				</u-field>
				<view class="position-absolute right-2 mt-2" style="z-index: 1;">
					<image :src="imageBase64" @click="imgClick" mode="widthFix" style="width: 120px; height: 120px;">
					</image>
					<!-- <canvas canvas-id="captchaCanvas" @tap="refreshCaptcha"
						style="width: 100px; height: 40px; background-color: #EEF7FF;"></canvas> -->
				</view>
				<!-- <input v-model="inputCaptcha" type="text" placeholder="请输入验证码" /> -->
				<u-field v-model="form.captcha" label="验证码" placeholder="请输入验证码" class="captcha-input"></u-field>

				<view class="u-inline-block">
					<u-checkbox v-model="agreementChecked" :label="true">我已阅读并同意</u-checkbox>
					<u-link href="/service-agreement" class="text-primary">《服务协议》</u-link>
					<u-link href="/privacy-policy" class="text-primary">《隐私政策》</u-link>
				</view>
			</view>

			<view class="pl-3 pr-3 ">
				<u-button shape="circle" @click="verifyCaptchaClick" type="success"
					:disabled="!agreementChecked">登录</u-button>
			</view>

			<view class="text-center ">
				<view class=" font-13 text-999999 mt-2">其他登录方式</view>
				<view class="top-15 position-relative" @click="gitMin('/pages/tabbar/login/phoneLogo')">
					<i class="p-1 iconfont icon-shouji font-28 main-text-color border-s "></i>
				</view>
			</view>
			<view @click="gitMin('/pages/tabbar/index/index')" class="position-absolute text-999999 font-13"
				style="margin-top: 50px; z-index: 1; left: 42.5%;">游客登录</view>
		</view>

	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import $U from '@/common/free-lib/util.js';
	export default {
		data() {
			return {
				agreementChecked: false, // 是否同意协议
				form: {
					captcha: "",
					checkKey: "",
					password: "",
					username: "",
				},
				imageBase64: '',
				checkKey: ''
			};

		},
		mounted() {
			// this.refreshCaptcha();

		},
		onLoad() {
			this.VerificationCode();
		},
		methods: {
			// refreshCaptcha() {
			// 	const ctx = uni.createCanvasContext('captchaCanvas', this);
			// 	ctx.clearRect(0, 0, 100, 40); // 清除画布
			// 	this.captchaText = this.generateCaptcha(); // 生成新的验证码文字
			// 	this.drawCaptcha(ctx, this.captchaText); // 绘制验证码
			// 	this.drawWave(ctx); // 绘制波浪线
			// 	ctx.draw();
			// },
			// generateCaptcha() {
			// 	// 生成随机的四位验证码
			// 	return Math.random().toString(36).substr(2, 4).toUpperCase();
			// },
			// drawCaptcha(ctx, text) {
			// 	// 随机生成颜色
			// 	const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF'];
			// 	ctx.setFontSize(20);
			// 	for (let i = 0; i < text.length; i++) {
			// 		const colorIndex = Math.floor(Math.random() * colors.length);
			// 		const color = colors[colorIndex];
			// 		ctx.setFillStyle(color);
			// 		ctx.fillText(text[i], 10 + i * 20, 30); // 将验证码文字绘制到画布上
			// 	}
			// },
			// drawWave(ctx) {
			// 	ctx.beginPath();
			// 	ctx.moveTo(0, 20); // 设置起点
			// 	for (let i = 0; i <= 100; i += 10) {
			// 		const y = i % 20 === 0 ? 20 : 30; // 波浪线上下振幅
			// 		ctx.quadraticCurveTo(i + 5, y, i + 10, 20); // 绘制二次贝塞尔曲线
			// 	}
			// 	ctx.setStrokeStyle('#999999'); // 设置线条颜色
			// 	ctx.stroke(); // 绘制线条
			// },

			imgClick() {
				this.VerificationCode()
			},

			VerificationCode() {
				$H.get('/brand/user/upper/randomImage', {}, {
						token: false,
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
						}
					})
					.then(res => {
						if (res && res.result && res.result.image) {
							this.imageBase64 = res.result.image;
							this.checkKey = res.result.checkKey
						} else {
							console.error('响应格式不正确或未找到图片数据');
						}
					})
					.catch(error => {
						console.error('请求出错', error); // 处理任何错误  
					});
			},

			verifyCaptchaClick() {
				if (!this.agreementChecked) {
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					});
					return;
				}
				if (this.form.captcha) {

					let o = {
						username: this.form.username,
						password: this.form.password,
						checkKey: this.checkKey,
						captcha: this.form.captcha
					}
					$H.post('/brand/user/upper/login', o, {
							token: false
						})
						.then(res => {
							uni.showToast({
								title: '登录成功！',
								icon: 'success'
							});
							$U.setStorage('token',res.result.token);
							$U.setStorage('phone',res.result.phone);
							$U.setStorage('legalRepresentative',res.result.legalRepresentative);
							$U.setStorage('id',res.result.id);
							$U.setStorage('enterpriseName',res.result.enterpriseName);
							$U.setStorage('avatar',res.result.avatar);
							
							// 登录成功后跳转到首页
							uni.switchTab({
								url: '/pages/tabbar/index/index'
							});
						})
						.catch(error => {
							log.error("12123123",error);
							console.error('请求出错', error); // 处理任何错误  
							uni.showToast({
								title: '登录失败',
								icon: 'none'
							});
						});
				} else {
					uni.showToast({
						title: '验证码错误',
						icon: 'none'
					});
				}
			},
			gitMin(url) {
				uni.switchTab({
					url
				})
			},
			gitMins(url) {
				uni.navigateTo({
					url
				})
			},
		}
	};
</script>

<style scoped>
	canvas {
		border: 1px solid #cccccc;
	}

	input,
	button {
		margin-top: 10px;
	}

	.u-border-bottom:after {
		border-bottom: 1px solid #FFC251 !important;
	}
</style>